import React from 'react'
import { Arrow, Like } from '@react-vant/icons'
import { Card, Image, Button, Toast, Space, Popup, NavBar } from 'react-vant'
import { async_addcarlist } from '../store/Slice'
import { useDispatch } from 'react-redux'
/* 弹出层组件 */
export default function Poput(props) {

    let dispatch = useDispatch()

    return (
        <div>
            <Popup visible={props.visible} onClose={() => props.setVisible(false)}>
                <div style={{ height: '100vh', width: '100vw' }}>
                    {/* 返回到首页 */}
                    <NavBar
                        title="标题"
                        leftText="返回"
                        rightText="按钮"
                        onClickLeft={() => {
                            props.setVisible(false)
                        }}
                        onClickRight={() => Toast('按钮')}
                    />
                    {/* 卡片组件 */}
                    <>
                        <Card round style={{ marginBottom: 20 }}>
                            <Card.Cover>
                                <div style={{ height: '60vh' }}>
                                    <Image src={props.itemobj.img} />
                                </div>
                            </Card.Cover>
                            <Card.Header
                                extra={<Arrow />}
                            >
                                名称:{props.itemobj.title}
                            </Card.Header>
                            <Card.Body>
                                价格:{props.itemobj.price}
                            </Card.Body>
                            <Card.Footer>
                                <Space>
                                    <Button
                                        icon={<Like />}
                                        round
                                        color='linear-gradient(to right, #ff6034, #ee0a24)'
                                        size='small'
                                        onClick={() => {
                                            let obj = {
                                                ...props.itemobj
                                            }
                                            dispatch(async_addcarlist(obj))
                                        }}
                                    >
                                        加入购物车
                                    </Button>
                                </Space>
                            </Card.Footer>
                        </Card>
                    </>
                </div>
            </Popup>
        </div>
    )
}
